<template>
  <div class="app-container">
    <el-collapse>
      <el-collapse-item>
        <div slot="title">
          &nbsp;&nbsp;&nbsp;点击筛选&nbsp;&nbsp;&nbsp;<i class="icon iconfont icon-filter" style="font-size: 10px"></i>
        </div>
        <el-form :inline="true" :model="q" class="demo-form-inline query" label-position="left" >
          <el-form-item label="ID">
            <el-input v-model="q.id" placeholder="ID" prefix-icon="el-icon-edit"></el-input>
          </el-form-item>
          <el-form-item label="银行到账时间">
            <div>
              <el-date-picker v-model="q.transaction_time.$gte" value-format="yyyy-MM-dd HH:mm:ss" type="datetime" placeholder="选择日期时间"></el-date-picker>
              -<el-date-picker v-model="q.transaction_time.$lt" value-format="yyyy-MM-dd HH:mm:ss" type="datetime" placeholder="选择日期时间"></el-date-picker>
            </div>
          </el-form-item>
          <el-form-item label="我方到账时间">
            <div>
              <el-date-picker v-model="q.created_at.$gte" value-format="yyyy-MM-dd HH:mm:ss" type="datetime" placeholder="选择日期时间"></el-date-picker>
              -<el-date-picker v-model="q.created_at.$lt" value-format="yyyy-MM-dd HH:mm:ss" type="datetime" placeholder="选择日期时间"></el-date-picker>
            </div>
          </el-form-item>
          <el-form-item label="商户">
            <el-select v-model="q.mch_id" placeholder="请选择">
              <el-option label="所有" :value=null></el-option>
              <el-option v-for="mch of MchList" :key="mch.id" :label="mch.name" :value="mch.id"></el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="匹配状态">
            <el-select v-model.number="q.status" placeholder="请选择">
              <el-option label="所有" :value=null></el-option>
              <el-option v-for="(statu, index) of MatchStatusArray" :key="index" :label="statu" :value="index"></el-option>
            </el-select>
          </el-form-item>
          <el-form-item>
            <el-input v-model="q.bankcard_name" placeholder="银行卡名称" prefix-icon="el-icon-edit"></el-input>
          </el-form-item>
          <el-form-item>
            <el-input v-model="q.bankcard_num" placeholder="银行卡号" prefix-icon="el-icon-edit"></el-input>
          </el-form-item>
          <el-form-item>
            <el-input v-model="q.bank" placeholder="银行" prefix-icon="el-icon-edit"></el-input>
          </el-form-item>
          <el-form-item>
            <el-input v-model="q.amount" placeholder="金额" prefix-icon="el-icon-edit"></el-input>
          </el-form-item>
          <el-form-item>
            <el-input v-model="q.order_id" placeholder="匹配订单ID" prefix-icon="el-icon-edit"></el-input>
          </el-form-item>
          <el-form-item>
            <el-input v-model="q.balance" placeholder="账户余额" prefix-icon="el-icon-edit"></el-input>
          </el-form-item>
          <el-form-item>
            <el-input v-model="q.payer" placeholder="付款人" prefix-icon="el-icon-edit"></el-input>
          </el-form-item>
          <el-form-item>
            <el-input v-model="notes.$like" placeholder="NOTES" prefix-icon="el-icon-edit"></el-input>
          </el-form-item>
          <el-form-item>
            <el-button type="primary" @click="query">查询</el-button>
            <el-button type="danger" @click="reload">重置</el-button>
          </el-form-item>
        </el-form>
      </el-collapse-item>
    </el-collapse>
    <el-row>
      <el-col >
        总收入: <span style="color: #f00;line-height: 80px" v-if="listData.income">{{listData.income.toFixed(2)}}</span>元&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
        总支出: <span style="color: #f00;line-height: 80px" v-if="listData.spend">{{listData.spend.toFixed(2)}}</span>元
      </el-col>
    </el-row>
    <el-table :data="listData.list" v-loading.body="listLoading" @sort-change="sortlist" element-loading-text="Loading" stripe border fit highlight-current-row>
      <el-table-column prop="id" label='ID' sortable width="80"></el-table-column>
      <el-table-column prop="mch_id" label='商户ID' sortable width="100"></el-table-column>
      <el-table-column prop="bankcard_name" label='银行卡名称' sortable width="120"></el-table-column>
      <el-table-column prop="bankcard_num" label='银行卡号' sortable width="180"></el-table-column>
      <el-table-column prop="bank" label='银行' sortable width="100"></el-table-column>
      <el-table-column prop="payer" label='付款人' sortable width="240"></el-table-column>
      <el-table-column prop="transfer_from" label='付款方' sortable width="180"></el-table-column>
      <el-table-column prop="transfer_to" label='收款方' sortable width="180"></el-table-column>
      <!--<el-table-column prop="trading_channel" label='交易通道' sortable width="100"></el-table-column>-->
      <el-table-column prop="amount" label='金额' sortable width="100"></el-table-column>
      <el-table-column prop="balance" label='当前余额' sortable width="100"></el-table-column>
      <el-table-column prop="remarks" label='备注' sortable width="120"></el-table-column>
      <el-table-column prop="notes" label='NOTES' sortable width="180"></el-table-column>
      <el-table-column prop="status" label='匹配状态' width="100">
        <template slot-scope="scope">{{MatchStatusArray[scope.row.status]}}</template>
      </el-table-column>
      <el-table-column prop="order_id" label='匹配订单号' width="180"></el-table-column>
      <el-table-column prop="transaction_time" label='银行到账时间' sortable width="180"></el-table-column>
      <el-table-column prop="created_at" label='创建时间' sortable width="180"></el-table-column>
      <el-table-column prop="updated_at" label='更新时间' sortable width="180"></el-table-column>
      <el-table-column label="操作" width="80" fixed="right">
        <template slot-scope="scope">
          <div>
            <el-button v-if="scope.row.status === 1" type="text" size="small"  @click="detail(scope.row)">[订单详情]</el-button>
            <el-button v-if="scope.row.status === 0 && scope.row.amount > 0" type="text" size="small"  @click="match(scope.row)">[手动匹配]</el-button>
          </div>
        </template>
      </el-table-column>
    </el-table>
    <div class="pagination">
      <el-pagination  @size-change="handleSizeChange" @current-change="handleCurrentChange"
                      :current-page="q.$page" :page-sizes="$store.state.app.pageSizeArr"
                      :page-size="q.$size"
                      layout="total, sizes, prev, pager, next, jumper"
                      :total="listData.total_count">
      </el-pagination>
    </div>
    <show-detail v-if="showDetailInfo" :showDetailInfo.sync ="showDetailInfo" :order_id="order_id"></show-detail>
    <show-match v-if="showMatchInfo" :showMatchInfo.sync ="showMatchInfo" :id="id" :amount="amount"></show-match>
  </div>
</template>

<script>
  import showDetail from './showDetail'
  import showMatch from './matchOrder'
  import { getBankRecordList, getMchList } from '@/api/merchant'
  import {queryFilter} from '@/utils/patch'
  export default {
    components: { showDetail, showMatch },
    data() {
      return {
        listData: {},
        notes: {},
        showDetailInfo: false,
        showMatchInfo: false,
        q: {transaction_time: {}, created_at: {},$size: 30, $page: 1},
        MchList: [],
        MatchStatusArray: ['未匹配', '已匹配'],
        listLoading: true,
        order_id: null,
        id: null,
        amount: null
      }
    },
    created() {
      this.getList()
      this.getMchList()
    },
    deactivated(){
      this.listLoading = false
    },
    methods: {
      query(){
        this.getList()
      },
      reload() {
        this.notes = {}
        this.q = {transaction_time: {}, created_at: {},$size: 30, $page: 1}
        this.getList()
      },
      sortlist(sort){
        this.q.$orderby = sort.prop
        this.getList()
      },
      handleSizeChange (val) {
        this.q.$size = val
        this.getList()
      },
      handleCurrentChange (val) {
        this.q.$page = val
        this.getList()
      },
      detail(row){
        this.order_id = row.order_id
        this.showDetailInfo = true
      },
      match(row){
        this.id = row.id
        this.amount = row.amount
        this.showMatchInfo = true
      },
      getList() {
        if(this.notes.$like){
          this.q.notes = this.notes
        }
        let params = Object.assign({
          $orderby: '-id'
        }, this.q)

        let queryObj = queryFilter(params)
        this.listLoading = true
        getBankRecordList(queryObj).then(res => {
          if (res.status === 0) {
            this.listLoading = false
            this.listData = res.data
          }
        })
      },
      getMchList(){
        getMchList({$size: -1}).then(res => {
          if (res.status === 0) {
            this.MchList = res.data.list
          }
        })
      }
    },
    watch: {
      showDetailInfo() {
        if(!this.showDetailInfo){
          this.getList()
        }
      },
      showMatchInfo() {
        if(!this.showMatchInfo){
          this.getList()
        }
      }
    }
  }
</script>
